<template>
	<view>
		<uni-nav-bar class="bar" fixed="true" shadow="true" color="#333333" background-color="#fbbd08" @clickLeft="home"
			@clickRight="confirm">
			<view class="input-view">
				<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />
				<input v-model="value" confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
			</view>
			<view slot="right">
				搜索
			</view>
		</uni-nav-bar>
		<view class="outimage">
			<view class="display">
				<view class="image" v-for="(n,index) in searchresult">
					<image mode="scaleToFill"  lazy-load="true" @click="clickimage(n.imagehref)" v-bind:src="n.imagehref" show-menu-by-longpress="true">
					</image>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message type="success" :duration="700" :message="message"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchresult: [],
				searchvalue: '',
				moreimage: [],
				showmore: false,
				tip: true,
				yuan: true,
				message:'',
				value:''
			}
		},
		methods: {
			clickimage: function(url) {
				uni.showLoading({title: '加载中',mask:true});
				uni.previewImage({
					current: 0,
					urls: [url],
					success(res) {
						setTimeout(function () {uni.hideLoading();}, 0)
					}
				})
			},
			home: function() {
				wx.showToast({
					title: "123"
				})
			},
			confirm:function(){
				if(this.value==''){
					this.message="请先输入点什么吧"
					this.$refs.popup.open('top')
					return
				}
				uni.redirectTo({
				    url: '../searchexpression/searchexpression?searchvalue='+this.value
				});
				
			}
			// toofew:function(){
			// 	var that=this
			// 	that.tip=false
			// 	uni.request({
			// 		url:'http://api.hhll.xyz/search',
			// 		data:{
			// 			'key':that.searchvalue
			// 		},
			// 		success(res) {
			// 			that.showmore=true
			// 			that.yuan=false
			// 			that.moreimage=res.data
			// 		}
			// 	})
			// }
		},
		onLoad(option) {
			uni.showLoading({title: '加载中',mask:true});
			var that = this
			that.value=option.searchvalue
			that.message="点击图片即可发送给朋友或保存哦"
			that.$refs.popup.open('top')
			that.searchvalue = option.searchvalue
			uni.request({
				url:that.$pydns+"search",
				data:{
					'key':option.searchvalue
				},success(res) {
					that.searchresult=res.data
					setTimeout(function () {uni.hideLoading();}, 100);
				}
			})
		},
		onShow() {

		}
	}
</script>

<style>
	.outimage {
		display: flex;
		justify-content: center;
	}

	.display {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		width: 95vw;
	}

	.image {
		width: 29%;
		zoom: 0.4;
		border-radius: 15px;
		overflow: hidden;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		width: 370rpx;
		padding: 0 5px;
		font-size: 14px;
		background-color: #f8f8f8;
	}
</style>
